<template>
  <div style="text-align: center; width: 680px; margin: auto; background: #fff">
    <table
      cellpadding="0"
      cellspacing="0"
      style="
        table-layout: fixed;
        position: relative;
        width: 100%;
        font-family: 仿宋_GB2312;
        font-size: 16px;
        margin: auto;
      "
    >
      <tr style="height: 10px">
        <td
          v-for="item in 100"
          :key="item"
          style="width: 1%; text-align: center"
        />
      </tr>
      <tr style="height: 60px">
        <td colspan="100" style="text-align: center">
          <span id="Lab_title" style="font-size: 24px; font-weight: bold"
            >技术负责人基本情况</span
          >
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">姓名</td>
        <td colspan="14" class="TableBorderOther">
          {{ formData.jsfzrXm }}
        </td>
        <td colspan="14" class="TableBorderOther">性别</td>
        <td colspan="14" class="TableBorderOther">
          <Aselect
            :disabled="disabled"
            v-model="formData.jsfzrXb"
            :options="$dict('sex').list()"
            placeholder=""
          />
        </td>
        <td colspan="14" class="TableBorderOther">出生年月</td>
        <td colspan="14" class="TableBorderOther">
          <AdatePicker
            :pickerOptions="pickerOptions()"
            :disabled="disabled"
            v-model="formData.jsfzrCsny"
            :clearable="false"
            placeholder=""
          />
        </td>
        <td colspan="16" rowspan="4" class="TableBorderRight">
          <Upload
            class="word-upload"
            v-model="formData.jsfzrPhoto"
            businessTable="TB_APPLY"
            :businessId="formData.id || createdId"
            subType="jsfzrPhoto"
            accept=".jpg"
            :disabled="disabled"
            :maxSize="200"
          />
          <div
            style="color: #666666; font-size: 10px; padding: 0 10px"
            v-show="!disabled && !formData.jsfzrPhoto"
          >
            (支持文件格式：jpg;上传大小：0~200KB)
          </div>
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">职务</td>
        <td colspan="14" class="TableBorderOther">
          {{ formData.jsfzrZw }}
        </td>
        <td colspan="14" class="TableBorderOther">职称</td>
        <td colspan="14" class="TableBorderOther">
          {{ $dict('title_level').get(formData.jsfzrZc) }}
        </td>
        <td colspan="14" class="TableBorderOther">学历</td>
        <td colspan="14" class="TableBorderOther">
          <Aselect
            :disabled="disabled"
            v-model="formData.jsfzrXl"
            :options="$dict('education').list()"
            placeholder=""
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="28" class="TableBorderOther">
          何时/何校/<br />何专业毕业
        </td>
        <td colspan="56" class="TableBorderOther">
          <textarea
            style="resize: none;border:none"
            :disabled="disabled"
            v-model.trim="formData.jsfzrHzyby"
            class="text-center"
          />
        </td>
      </tr>
      <tr style="height: 50px">
        <td colspan="14" class="TableBorderOther">检测工作从<br />业年限</td>
        <td colspan="14" class="TableBorderOther">
          <input
            :disabled="disabled"
            v-model.trim="formData.jsfzrCynx"
            type="number"
            class="input-center"
          />
        </td>
        <td colspan="14" class="TableBorderOther">办公电话</td>
        <td colspan="14" class="TableBorderOther">
          <input
            :disabled="disabled"
            v-model.trim="formData.jsfzrBgdh"
            type="text"
            class="input-center"
          />
        </td>
        <td colspan="14" class="TableBorderOther">移动电话</td>
        <td colspan="14" class="TableBorderOther">
          <input
            :disabled="disabled"
            v-model.trim="formData.jsfzrYddh"
            type="text"
            class="input-center"
          />
        </td>
      </tr>
      <tr style="height: 320px">
        <td colspan="100" class="TableBorderRight">
          <div style="text-align: left; margin: 4px 0px 4px 10px">
            工作经历：
          </div>
          <textarea
            :disabled="disabled"
            v-model.trim="formData.jsfzrGzjl"
            rows="14"
            cols="20"
          />
        </td>
      </tr>
      <tr style="height: 100px">
        <td colspan="100" class="TableBorderRightBottom">
          <div style="text-align: left; margin: 4px 0px 4px 10px">
            受过何种奖励或者处分：
          </div>
          <textarea
            :disabled="disabled"
            v-model.trim="formData.jsfzrJlcf"
            rows="3"
            cols="20"
          />
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import AdatePicker from '@/components/TimePicker/AdatePicker';
import Aselect from '@/components/Select/Aselect';
import Upload from '@/components/Upload/Upload';
import { fieldsValidate } from '@/utils/validate.js';
export default {
  props: {
    formData: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    createdId: {
      type: String,
    },
  },
  components: { AdatePicker, Aselect, Upload },
  data() {
    return {};
  },
  methods: {
    // 日期选择器配置
    pickerOptions() {
      return {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      };
    },
    // 校验表单
    formValidated() {
      const rules = {
        jsfzrHzyby: [
          {
            maxLength: 100,
            text: '何时/何校/何专业毕业长度应小于100位',
          },
        ],
        jsfzrCynx: [
          {
            maxLength: 2,
            text: '检测工作从业年限长度应小于2位',
          },
          {
            pattern: /^\d+$/,
            text: '检测工作从业年限应为正整数',
          },
        ],
        jsfzrBgdh: [
          {
            maxLength: 50,
            text: '办公电话长度应小于50位',
          },
        ],
        jsfzrYddh: [
          {
            pattern:
              /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/,
            text: '请输入正确格式的移动电话',
          },
        ],
        jsfzrGzjl: [
          {
            maxLength: 1000,
            text: '工作经历长度应小于1000位',
          },
        ],
        jsfzrJlcf: [
          {
            maxLength: 1000,
            text: '受过何种奖励或者处分长度应小于1000位',
          },
        ],
      };
      return fieldsValidate(this.formData, rules, this);
    },
  },
};
</script>
<style lang="scss" scoped>
@import '../../../../../../assets/styles/word.scss';
</style>
